<template>
  <div class="container mx-auto px-4 py-8 max-w-7xl">
    <!-- 页面标题卡片 -->
    <div class="content-wrapper">
      <div class="relative h-64 md:h-80" :style="{ backgroundImage: `url(${state.headerImage})` }">
        <div class="absolute inset-0 bg-gradient-to-t from-dark/70 to-transparent flex flex-col justify-end p-6 md:p-10">
          <h1 class="text-[clamp(1.8rem,5vw,3rem)] font-bold text-white mb-2">{{ state.character.name }}</h1>
          <p class="text-[clamp(1rem,2vw,1.25rem)] text-white/90 max-w-3xl">{{ state.character.description }}</p>
        </div>
      </div>
      <div class="p-6 md:p-8 flex flex-wrap items-center justify-between border-t border-gray-100">
        <div class="flex items-center space-x-3 mb-4 md:mb-0">
          <div class="flex -space-x-2">
            <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-green-100 text-green-800 border-2 border-white">
              <i class="fa-solid fa-leaf"></i>
            </span>
            <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-yellow-100 text-yellow-800 border-2 border-white">
              <i class="fa-solid fa-sun"></i>
            </span>
            <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-pink-100 text-pink-800 border-2 border-white">
              <i class="fa-solid fa-heart"></i>
            </span>
          </div>
          <span class="text-sm font-medium text-gray-600">属性: {{ state.character.attributes.join(' · ') }}</span>
        </div>
        <button class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg flex items-center btn-hover" @click="toggleMusic">
          <i :class="state.isMusicPlaying ? 'fa-pause' : 'fa-music' " class="mr-2"></i>
          <span>{{ state.isMusicPlaying ? '暂停背景音乐' : '播放背景音乐' }}</span>
        </button>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
      <!-- 左侧：角色介绍 -->
      <div class="lg:col-span-2 space-y-8">
        <!-- 角色背景 -->
        <div class="bg-white rounded-2xl p-6 md:p-8 card-shadow">
          <h2 class="text-2xl font-bold text-dark mb-4 flex items-center">
            <i class="fa-solid fa-book-open text-primary mr-2"></i>角色背景
          </h2>
          <p class="text-gray-700 leading-relaxed mb-4">
            {{ state.character.background }}
          </p>
          <p class="text-gray-700 leading-relaxed">
            {{ state.character.backgroundContinued }}
          </p>
        </div>

        <!-- 小说中的经历 -->
        <div class="bg-white rounded-2xl p-6 md:p-8 card-shadow">
          <h2 class="text-2xl font-bold text-dark mb-4 flex items-center">
            <i class="fa-solid fa-scroll text-primary mr-2"></i>小说中的经历
          </h2>
          <div class="space-y-4">
            <div v-for="(experience, index) in state.experiences" :key="index" class="flex items-start">
              <div class="bg-primary/10 rounded-full p-2 mr-4">
                <i :class="experience.icon" class="text-primary"></i>
              </div>
              <div>
                <h3 class="font-semibold text-lg mb-1">{{ experience.title }}</h3>
                <p class="text-gray-700">{{ experience.description }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧：角色立绘和关系 -->
      <div class="space-y-8">
        <!-- 角色立绘 -->
        <div class="bg-white rounded-2xl overflow-hidden card-shadow">
          <div class="relative h-96">
            <img :src="state.character.portrait" alt="角色立绘" class="w-full h-full object-cover">
            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-dark/80 to-transparent p-4">
              <p class="text-white font-medium">{{ state.character.portraitCaption }}</p>
            </div>
          </div>
        </div>

        <!-- 人物关系 -->
        <div class="bg-white rounded-2xl p-6 md:p-8 card-shadow">
          <h2 class="text-2xl font-bold text-dark mb-4 flex items-center">
            <i class="fa-solid fa-users text-primary mr-2"></i>人物关系
          </h2>
          <div class="space-y-4">
            <div v-for="(relationship, index) in state.relationships" :key="index" class="flex items-center">
              <img :src="relationship.image" :alt="relationship.name" class="w-12 h-12 rounded-full object-cover mr-4">
              <div class="flex-1">
                <h3 class="font-medium text-gray-900">{{ relationship.name }}</h3>
                <p class="text-sm text-gray-500">{{ relationship.role }}</p>
              </div>
              <span :class="relationship.statusClass" class="text-xs font-medium px-2.5 py-0.5 rounded-full">
                {{ relationship.status }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部区域 -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- 核心思想 -->
      <div class="bg-white rounded-2xl p-6 md:p-8 card-shadow">
        <h2 class="text-2xl font-bold text-dark mb-4 flex items-center">
          <i class="fa-solid fa-lightbulb text-primary mr-2"></i>核心思想
        </h2>
        <div class="space-y-4">
          <div v-for="(idea, index) in state.coreIdeas" :key="index" class="flex items-start">
            <div class="text-primary text-xl font-bold mr-3">{{ index + 1 }}.</div>
            <p class="text-gray-700">{{ idea }}</p>
          </div>
        </div>
      </div>

      <!-- 目录指引 -->
      <div class="bg-white rounded-2xl p-6 md:p-8 card-shadow">
        <h2 class="text-2xl font-bold text-dark mb-4 flex items-center">
          <i class="fa-solid fa-bookmark text-primary mr-2"></i>目录指引
        </h2>
        <div class="space-y-3">
          <a v-for="(volume, index) in state.volumes" :key="index" href="#" class="block p-3 bg-primary/5 hover:bg-primary/10 rounded-lg transition-colors duration-300">
            <h3 class="font-medium text-gray-900">{{ volume.title }}</h3>
            <p class="text-sm text-gray-500">{{ volume.chapters }} · {{ volume.status }}</p>
          </a>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <footer class="mt-12 text-center text-gray-500 text-sm">
      <p>{{ state.copyright }}</p>
    </footer>
  </div>
</template>

<script setup>
import { reactive } from 'vue';

const state = reactive({
  headerImage: 'https://picsum.photos/1200/400',
  isMusicPlaying: false,
  character: {
    name: '林小雨',
    description: '一位穿越到异世界的现代少女，带着神秘玉佩寻找回家的路',
    attributes: ['木', '光', '治愈'],
    background: '林小雨本是21世纪的一名普通大学生，一次意外的考古发现让她穿越到了一个充满魔法和神秘力量的异世界。随身带着的祖传玉佩似乎隐藏着某种秘密，不仅保护她在异世界生存，还赋予了她操纵自然元素的能力。',
    backgroundContinued: '在这个陌生的世界里，林小雨必须学会适应新环境，与各种生物和种族打交道，同时寻找回家的方法。她逐渐发现，自己的穿越并非偶然，而是与这个世界的命运息息相关...',
    portrait: 'https://picsum.photos/600/800',
    portraitCaption: '林小雨 - 异世界形象'
  },
  experiences: [
    {
      icon: 'fa-solid fa-dungeon',
      title: '第一章：初入异世界',
      description: '在一个古老的遗迹中，林小雨触碰了一块发光的石碑，随后被卷入了一个时空漩涡...'
    },
    {
      icon: 'fa-solid fa-tree',
      title: '第二章：森林中的邂逅',
      description: '在一片神秘的森林中，林小雨遇到了一位受伤的精灵王子，她用玉佩的力量治愈了他...'
    },
    {
      icon: 'fa-solid fa-shield',
      title: '第三章：魔法学院',
      description: '为了更好地控制自己的能力，林小雨进入了大陆上最著名的魔法学院...'
    }
  ],
  relationships: [
    {
      name: '艾尔文·绿叶',
      role: '精灵族王子，森林守护者',
      image: 'https://picsum.photos/seed/elf/60/60',
      status: '盟友',
      statusClass: 'bg-green-100 text-green-800'
    },
    {
      name: '格鲁姆·铁锤',
      role: '矮人铁匠大师，武器专家',
      image: 'https://picsum.photos/seed/dwarf/60/60',
      status: '盟友',
      statusClass: 'bg-green-100 text-green-800'
    },
    {
      name: '马尔萨斯·暗影',
      role: '黑暗魔法师，时空漩涡的幕后黑手',
      image: 'https://picsum.photos/seed/enemy/60/60',
      status: '敌人',
      statusClass: 'bg-red-100 text-red-800'
    }
  ],
  coreIdeas: [
    '即使身处陌生环境，也要保持乐观和勇气',
    '真正的力量来自内心，而非外部环境',
    '友谊和团结是战胜困难的关键'
  ],
  volumes: [
    {
      title: '第一卷：异世界的召唤',
      chapters: '共12章',
      status: '已完结'
    },
    {
      title: '第二卷：魔法学院的秘密',
      chapters: '共15章',
      status: '连载中'
    },
    {
      title: '第三卷：时空的守护者',
      chapters: '共18章',
      status: '未开始'
    }
  ],
  copyright: '© 2025 异世界小说工作室 · 所有权利保留'
});

const toggleMusic = () => {
  state.isMusicPlaying = !state.isMusicPlaying;
  // 实际项目中可以添加音频控制逻辑
  console.log(state.isMusicPlaying ? '音乐已开启' : '音乐已关闭');
};
</script>

<style scoped>
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .content-wrapper .content:after {
    content: '\0020';
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
  }
  .glass-effect {
    backdrop-filter: blur(8px);
    background-color: rgba(255, 255, 255, 0.8);
  }
  .card-shadow {
    box-shadow: 0 10px 25px -5px rgba(50, 76, 255, 0.1), 0 8px 10px -6px rgba(50, 76, 255, 0.1);
  }
  .btn-hover {
    transition: all 0.3s ease;
  }
  .btn-hover:hover {
    transform: translateY(-2px);
  }
}
</style>